<template>
    <div style="height:100%;background:#F0F0F0">
        <yd-layout>   
            <yd-navbar slot="navbar" title="我要查书" style="height:1rem;font-size:.1rem"></yd-navbar>
                <yd-search v-model="searchKey" :on-submit="submitHandler" placeholder="请输入关键字" cancel-text="搜索" :on-cancel="submitHandlerSearch"  style="width:100%"></yd-search>
                <yd-tab style="margin:0rem .15rem 0rem .15rem;" v-model="tab" :callback="fn" :prevent-default="false" :item-click="itemClick">  
                    <yd-tab-panel label="书名" tabkey="sm"></yd-tab-panel>
                    <yd-tab-panel label="责任者" tabkey="zr"></yd-tab-panel>
                    <yd-tab-panel label="出版者" tabkey="cb"></yd-tab-panel>
                    <yd-tab-panel label="标准编码" tabkey="bm"></yd-tab-panel>
                </yd-tab>
                <yd-infinitescroll :callback="loadList" ref="infinitescrollData">
                    <yd-cell-group  slot="list">
                    <div v-for="item in list" :key="item.key">
                        <div class="div1">
                            <div v-if="(item.tm.toLowerCase()).indexOf(searchValue.toLowerCase())>=0"> 
                                <div style="height:.8rem;margin:.05rem .0rem 0.05rem .15rem;text-align:left;font-size:.3rem" v-if="item.tm.length>26">
                                    <span>{{item.tm.slice(0,item.tm.toLowerCase().indexOf(searchValue.toLowerCase()))}}</span>
                                    <span style="color:#2A70FE">{{item.tm.slice(item.tm.toLowerCase().indexOf(searchValue.toLowerCase()),item.tm.toLowerCase().indexOf(searchValue.toLowerCase())+searchValue.length)}}</span>
                                    <span>{{item.tm.substr(item.tm.toLowerCase().indexOf(searchValue.toLowerCase())+searchValue.length)}}</span>  
                                </div>
                                <div style="height:.35rem;margin:.05rem .0rem 0.05rem .15rem;text-align:left;font-size:.3rem" v-else>
                                    <span>{{item.tm.slice(0,item.tm.toLowerCase().indexOf(searchValue.toLowerCase()))}}</span>
                                    <span style="color:#2A70FE">{{item.tm.slice(item.tm.toLowerCase().indexOf(searchValue.toLowerCase()),item.tm.toLowerCase().indexOf(searchValue.toLowerCase())+searchValue.length)}}</span>
                                    <span>{{item.tm.substr(item.tm.toLowerCase().indexOf(searchValue.toLowerCase())+searchValue.length)}}</span>  
                                </div>                  
                            </div>  
                            <div v-else> 
                                <div style="height:.8rem;margin:.05rem .0rem 0.05rem .15rem;text-align:left;font-size:.3rem" v-if="item.tm.length>26">{{item.tm}}</div>
                                <div style="height:.35rem;margin:.05rem .0rem 0.05rem .15rem;text-align:left;font-size:.3rem" v-else>{{item.tm}}</div>
                            </div> 
                            <div style="height:.3rem;margin:0rem .0rem 0.05rem .15rem;text-align:left;">索书号：{{item.ssh}} </div>
                            <div style="height:.3rem;margin:0rem .0rem 0.05rem .15rem;text-align:left;">— {{item.zrz}}</div> 
                            <div style="height:.3rem;margin:0rem .0rem 0.05rem .15rem;text-align:left;">标准编码：{{item.bzbm}}</div> 
                            <div style="height:.3rem;margin:0rem .0rem 0.05rem .15rem;text-align:left;">出版信息：{{item.cbz}} {{item.cbrq}} {{item.cbd}}</div>  
                            <div style="height:.3rem;margin:0rem .0rem 0.05rem .15rem;text-align:left;">{{(item.ssh.substr(0,1)=='R'||item.ssh.substr(0,1)=='Q')?"生物医药书库":"人文社科书库"}}</div>                              
                            <div style="height:.3rem;margin:0rem .0rem 0.15rem .15rem;text-align:left;">可外借数：{{Number(item.kwjs)-Number(item.ywjs)}} </div> 
                        </div>
                    </div>
                    </yd-cell-group>
                    <span slot="doneTip">~~已经最后了~~</span>
                    <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>   
                </yd-infinitescroll>   
            <yd-tabbar slot="tabbar">
                <yd-tabbar-item title="扫描二维码" link="#" active @click.native="scanCode()">
                    <yd-icon name="qrscan" slot="icon"></yd-icon>
                </yd-tabbar-item>
            </yd-tabbar>
        </yd-layout>   
        <yd-popup v-model="showDetail" position="right" width="100%">
            <yd-layout>   
                <yd-navbar slot="navbar" title="图书信息" style="height:1rem;font-size:.1rem">
                    <router-link slot="left" to="#" @click.native="showDetail = false">
                        <yd-navbar-back-icon></yd-navbar-back-icon>
                    </router-link>
                </yd-navbar>
                <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                <div style="height:1rem">

                </div>
                <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                <yd-button type="danger" style="margin: 30px;" @click.native="showDetail = false">Close Right Popup</yd-button>
            </yd-layout>
        </yd-popup>        
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios'
import {Layout} from 'vue-ydui/dist/lib.rem/layout';
Vue.component(Layout.name, Layout);
import {Button, ButtonGroup} from 'vue-ydui/dist/lib.rem/button';
Vue.component(Button.name, Button);
Vue.component(ButtonGroup.name, ButtonGroup);
import {NavBar, NavBarBackIcon, NavBarNextIcon} from 'vue-ydui/dist/lib.rem/navbar';
Vue.component(NavBar.name, NavBar);
Vue.component(NavBarBackIcon.name, NavBarBackIcon);
Vue.component(NavBarNextIcon.name, NavBarNextIcon);
import {TabBar, TabBarItem} from 'vue-ydui/dist/lib.rem/tabbar';
Vue.component(TabBar.name, TabBar);
Vue.component(TabBarItem.name, TabBarItem);
import {CellGroup, CellItem} from 'vue-ydui/dist/lib.rem/cell';
Vue.component(CellGroup.name, CellGroup);
Vue.component(CellItem.name, CellItem);
import {Input} from 'vue-ydui/dist/lib.rem/input';
Vue.component(Input.name, Input);
import {Search} from 'vue-ydui/dist/lib.rem/search';
Vue.component(Search.name, Search);
import {Tab, TabPanel} from 'vue-ydui/dist/lib.rem/tab';
Vue.component(Tab.name, Tab);
import {FlexBox, FlexBoxItem} from 'vue-ydui/dist/lib.rem/flexbox';
Vue.component(FlexBox.name, FlexBox);
Vue.component(FlexBoxItem.name, FlexBoxItem);
import {InfiniteScroll} from 'vue-ydui/dist/lib.rem/infinitescroll';
Vue.component(InfiniteScroll.name, InfiniteScroll);
import { Confirm, Alert, Toast, Notify, Loading } from 'vue-ydui/dist/lib.rem/dialog';
Vue.prototype.$dialog = {
    confirm: Confirm,
    alert: Alert,
    toast: Toast,
    notify: Notify,
    loading: Loading,
};
export default {
    data() {
        return {
            tab: 0,
            searchValue:'',     //查询内容
            searchKey:'',
            searchType:'',      //查询方式
            page: 1,
            pageSize: 10,
            list:[],
            isResult: false,
            showDetail:false,
            total: 0
        }
    },
    created(){
        this.searchType = 'sm'    
    },
    methods:{
        scanCode() {
            let that_ = this;
            wx.scanQRCode({
                needResult : 1,
                scanType : [ "qrCode", "barCode" ],
                success : function(res) {
                    console.log(res)
                    var result = res.resultStr;
                    that_.searchType = 'ewm';
                    that_.submitHandler(result.split(',')[1]);
                },
                fail : function(res) {
                    console.log(res)
                    alert(JSON.stringify(res));
    
                }
            });
        },
        submitHandler(value){
            console.log("aaaaaaaaaaaaaa")
            console.log(value)
            console.log("aaaaaaaaaaaaaa")
            if(value.trim() == ''){
                console.log("kongkongkong")
                this.$dialog.toast({
                    mes: '请扫码查询或输入关键字',
                    timeout: 1500,
                    icon: 'error'
                });
                this.searchValue = '';
                return false;
            }
            this.list = [];
            this.searchValue = this.searchKey;
            this.searchKey = "";
            let that_ = this;
            this.$dialog.loading.open('正在查询'+value+',请稍后');
            setTimeout(() => {
                this.$dialog.loading.close();
            }, 20000);
            axios.get("/api/libiary/queryBooks",{                  
                params:{
                    pageNum:1,
                    num:that_.pageSize,
                    tm:value,
                    type: that_.searchType,                   
                }          
            }).then(function(res){
                console.log(res)
                let temp = res.data.data.records.length;
                if(temp > 0){
                    that_.total = res.data.data.total;
                    for(let i=0; i< temp; i++){
                        that_.list.push(res.data.data.records[i])
                    }
                }else{
                   that_.$dialog.toast({
                        mes: '未找到关键字'+that_.searchValue+"相关的书籍",
                        timeout: 2500,
                        icon: 'error',
                    }); 
                }
                that_.$dialog.loading.close();
            }).catch(function(error){
                console.log(error)
                that_.$dialog.toast({
                    mes: '系统忙碌，请稍后再试',
                    timeout: 1500,
                    icon: 'error',
                });
                that_.$dialog.loading.close();
            })
        },
        submitHandlerSearch(){
            console.log("bbbbbbbb")
            console.log(this.searchKey)
            console.log("bbbbbbbb")
            if(this.searchKey.trim() == ''){
                console.log("kongkongkong")
                this.$dialog.toast({
                    mes: '请扫码查询或输入关键字',
                    timeout: 1500,
                    icon: 'error'
                });
                this.searchValue = '';
                return false;
            }
            this.list = [];
            this.searchValue = this.searchKey;
            let that_ = this;
            this.$dialog.loading.open('正在查询'+this.searchKey+',请稍后');
            setTimeout(() => {
                this.$dialog.loading.close();
            }, 20000);
            axios.get("/api/libiary/queryBooks",{                  
                params:{
                    pageNum:1,
                    num:that_.pageSize,
                    tm: that_.searchKey,
                    type: that_.searchType,                   
                }          
            }).then(function(res){
                console.log(res)
                let temp = res.data.data.records.length;
                if(temp > 0){
                    that_.total = res.data.data.total;
                    for(let i=0; i< temp; i++){
                        that_.list.push(res.data.data.records[i])
                    }
                }else{
                   that_.$dialog.toast({
                        mes: '未找到关键字'+that_.searchValue+"相关的书籍",
                        timeout: 2500,
                        icon: 'error',
                    }); 
                }
                that_.searchKey = '';
                that_.$dialog.loading.close();
            }).catch(function(error){
                console.log(error)
                that_.$dialog.toast({
                    mes: '系统忙碌，请稍后再试',
                    timeout: 1500,
                    icon: 'error',
                });
                that_.searchKey = '';
                that_.$dialog.loading.close();
            })
        },
        loadList(){
            let that_ = this;
            this.$dialog.loading.open('正在加载数据,请稍后');
            setTimeout(() => {
                this.$dialog.loading.close();
            }, 20000);
            axios.get("/api/libiary/queryBooks",{                  
                params:{
                    pageNum: that_.page+1,
                    num: that_.pageSize,
                    tm: that_.searchValue,
                    type: that_.searchType,                   
                }          
            }).then(function(res){
                console.log(res)
                const _list = res.data.data.records;
                that_.list = [...that_.list, ..._list];
                if (_list.length < that_.pageSize || that_.page == res.data.data.pages) {
                    /* 所有数据加载完毕 */
                    that_.$refs.infinitescrollData.$emit('ydui.infinitescroll.loadedDone');
                    return;
                }
                that_.$refs.infinitescrollData.$emit('ydui.infinitescroll.finishLoad');
                that_.page++;
                that_.$dialog.loading.close();
            }).catch(function(error){
                console.log(error)
                that_.$dialog.toast({
                    mes: '系统忙碌，请稍后再试',
                    timeout: 1500,
                    icon: 'error',
                });
                that_.$dialog.loading.close();
            })    
        },
        fn(label, key) {
            this.searchType = key;
            console.log(key)
           
        },
        itemClick(key){
             this.tab = key;      
        },
        redirect(data){
            this.showDetail = true;
        }
    },
}

</script>

<style>
.yd-cell-box {
    margin-bottom: 0rem!important;
}
.div1{
    width:97%;
    height:100%;
    margin:2px auto;

    text-align: center;
    background: white;
    border:1px solid #BFB8C0;
    box-shadow: darkgrey 10px 10px 30px 5px;
}
</style>
    